<template>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
      <q-table :data="tableData" :columns="columns" :pagination.sync="serverPagination" row-key="name"
               :rows-per-page-options="rowsPerPageOptions" ref="table" @request="request" :loading="loading"
               :visible-columns="visibleColumns" selection="multiple" :selected.sync="selected" class="q-ma-sm">
        <template slot="top-left" slot-scope="props">
          <q-btn color="negative" @click.native="mutiBuildDialog=true"  label="批量打包" size="xs"/>
        </template>
        <template slot="top-right" slot-scope="props">
          <q-search @input="request(props)" :debounce="600" clearable v-model="search" placeholder="name,name_en"/>
        </template>
      </q-table>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
      <q-card class="q-ma-sm">
        <q-toolbar color="info">
          <q-toolbar-title class="flex flex-center">
            已选打包
          </q-toolbar-title>
        </q-toolbar>
        <div>
          <q-chip icon="album" color="negative" v-for="(element) in selected" :key="element.id" class="q-ma-xs">
          {{element.name}}-{{element.name_en}}
        </q-chip>
        </div>
        <q-toolbar color="negative">
          <q-toolbar-title class="flex flex-center">
            正在打包
          </q-toolbar-title>
        </q-toolbar>
        <q-table :data="buildTable" :columns="buildColumns" row-key="id" ref="table2"
                 :visible-columns="visibleBuild" hide-bottom :pagination.sync="buildPagination">
        </q-table>
      </q-card>
    </div>
    <verify :vcodeDialog = "mutiBuildDialog" @upVerify="$store.dispatch('mutiBuild/doMutiBuild')"
            :verifyTitle="mutiBuildTitle" @clsVerify="$store.commit('mutiBuild/closeMutiDialog')" ></verify>
  </div>
</template>

<script>
import mutiBuildModule from '../../store/mutiBuild'
export default {
  preFetch ({ store }) {
    store.registerModule('mutiBuild', mutiBuildModule)
    Promise.all([
      store.dispatch('mutiBuild/loadHeaders'),
      store.dispatch('mutiBuild/loadTable'),
      store.dispatch('mutiBuild/loadBuild')
    ])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'mutiBuild',
  data: function () {
    return this.$store.state.mutiBuild
  },
  methods: {
    request (props) {
      this.serverPagination = props.pagination
      this.$store.dispatch('mutiBuild/loadTable')
    }
  },
  beforeDestroy () {
    this.$store.commit('mutiBuild/clearAll')
    this.$store.unregisterModule('mutiBuild')
  },
  components: {
    verify: () => import('components/verify/verify')
  }
}
</script>

<style>
</style>
